<template>
    <div style="background:#2b4b6b;height:100vh;width: 100vw;">
        <div id="box">
            <img src="../assets/logo.png" alt="">
            <el-input v-model="username" prefix-icon="el-icon-user-solid" placeholder="请输入内容"></el-input>
            <el-input placeholder="请输入密码" prefix-icon="el-icon-s-home" v-model="password" show-password></el-input>
            <p><el-button type="primary" @click="goLogin()">登录</el-button>
                <el-button type="info" @click="reset()">重置</el-button>
            </p>
        </div>
    </div>
</template>
<script>
import { getLogin } from '../untils/api'
import axios from 'axios'
export default {
    name:'login',
    data() {
        return {
            username: 'admin',
            password: '123456'
        }
    },
    methods: {
        goLogin() {//登录
            if (this.username == '' || this.password == '') {
                this.$message({
                    showClose: true,
                    message: '内容不能为空',
                    type: 'error'
                });
                return false
            } else {
                getLogin({ username: this.username, password: this.password }).then(res => {
                    // console.log(res);
                    sessionStorage.setItem('token', res.data.data.token)

                    if (res.data.meta.status == 200) {
                        this.$router.push('/')
                        //     this.$message({
                        //     showClose: true,
                        //     message: `${res.data.meta.msg}`,
                        //     type: 'success'
                        // });
                    } else {
                        this.$router.push('/login')
                    }
                })

            }
            // axios.post('http://heima.9yuecloud.com:9988/api/private/v1/login',{username:this.username,password:this.password}).then(res=>{
            //     console.log(res);
            //     sessionStorage.setItem('token',res.data.data.token)
            // })
        },
        reset() {//重置
            this.username = '';
            this.password = ''
        }
    }
}
</script>
<style lang="scss" scoped>
#box {
    width: 550px;
    height: 300px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #fff;

    img {
        width: 120px;
        height: 120px;
        border-radius: 60px;
        margin-top: -15%;
        background-color: #fff;
        box-sizing: border-box;
        padding: 10px;
        box-shadow: 0 0 10px #fff;
    }

    .el-input {
        margin: 15px 0;
    }

    p {
        text-align: end;
    }
}
</style>


